<template>
  <div class="tabbar">
    <ul>
      <li v-for="item in list" :key="item.id" :class="{active : item.val == activeTab ? true : false}" @click="handleTabChange(item.val)">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.svg"></use>
        </svg>
        <span>
          {{item.title}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeTab: 'home',
      list:[
        {id:1,title:"首页",val:"home",svg:"#icon-shouye"},
        {id:2,title:"投资",val:"investment",svg:"#icon-zijinlicai"},
        {id:3,title:"发现",val:"find",svg:"#icon-faxian"},
        {id:4,title:"我的",val:"my",svg:"#icon-wode"},
      ]
    }
  },
  created(){
     var a = window.location.hash.slice(2)
     this.activeTab = a
  },
  updated(){
    // console.log(window.location.hash)
    var a = window.location.hash.slice(2)
    // console.log(a)
    this.activeTab = a
  },
  methods: {
    handleTabChange (val) {
      this.activeTab = val
      this.$router.push({path:"/"+val})
    }
  }
}
</script>

<style scoped>
  .tabbar{
    width: 100%;
    background: #fff;
    border-top: 0.01rem solid #e8e8e8;
    margin-top: 0.01rem;
  }
  ul{
    display: flex;
    flex-direction: row;
    
  }
  li{
    list-style: none;
    flex: 1;
    text-align: center;
    
    display: flex;
    flex-direction: column;
    padding: 0.07rem 0;
  }
  li span{
    display: block;
    font-size: .14rem;
  }
  .icon{
    width: .23rem;
    height: .23rem;
    margin: 0 auto;
    margin-bottom: 0.09rem;
    fill: #000;
  }
  li.active{
    color: orange;
  }
  li.active .icon{
    fill: orange;
  }
</style>
